<template>
    <el-dialog title="批量新增" :visible="value" @close="close"  width="500px" >
        <div class="box">
            <i class="el-icon-upload" style="font-size: 50px;color: #ccc" />
      <el-button type="text" @click="handleDownload">下载excel模板</el-button>
      <!-- 
        文件选择框就是丑  改不了
            1. 藏起来 style="display:none"
            2. 准备一个好看的按钮 或者其他的都可以 利用它"打中" 隔壁影藏的文件选择框
      -->
      <el-button @click="$refs.file.click()" type="text" >上传excel</el-button>
      <!-- 原生标签 文件选择框 => 打开系统文件 选择文件 -->
       <!-- accept 原生属性 直接决定文件类型
            原生事件:  change 文件选择框的值的变化时(选择文件)触发 
       -->
  <input type="file" accept=".xlsx,.xls" @change="handleChange" ref="file" style="display:none"/>
</div>
      <template #footer>
        <el-button size="mini" type="primary" @click="close">取消</el-button>
      </template>
    
    </el-dialog>
  </template>
  
  <script>
  import { getTemplateData, uploadExcel } from '@/api/employee'
  import{ saveAs } from 'file-saver'
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      close() {
        this.$emit('input', false)
      },
     async handleDownload(){
        // 下载模板
        //  请求后端接口(封装接口指定类型为 blob  拦截器已处理)
         const  res = await  getTemplateData()
          //    下载文件(需要二进制数据流)
       saveAs(res,'导入模板.xlsx')

      },
    async  handleChange(value){
        // 1.知道用户选择文件
        // 2. value 拿到用户选择的文件 事件对象里有
        // 3. console.log(选择文件拉)
        // 4. console.log(value.target) 当前 dom
        // 5. console.log(value.target.files) 选择的文件们
        // 至少选择一个文件
        if(value.target.files.length > 0){
            // 拿到文件
        //   console.log(value.target.files[0])
        try {
            await uploadExcel(value.target.files[0])     // 选中的文件
        // 提示
        this.$message.success('上传成功')
        // 上传成功后 关闭弹窗
        this.close()
        // 刷新列表 请求父组件的方法
        this.$emit('refresh')
       
        } catch {

        } finally { // 清空文件选择框
            this.$refs.file.value=''
        }
       
        }

      }
    }
  
  }
  </script>
  
  <style lang="sass" scoped>
.box
  display: flex
  flex-direction: column
  width: 360px
  height: 180px
  border: 2px dashed #ccc
  justify-content: center
  border-radius: 10px
  margin: 0 auto
  align-items: center

</style>